<template>
  <div class="userAnalysis">
    <el-card shadow="hover" class="userStatisticsBox">
      <h3>通话统计</h3>
      <div class="userStatisticsItem">
        <el-card class="one">
          <h4>通话消费</h4>
          <p class="p">今日:{{ totalCoinNums + "金币" }}</p>
          <!-- <div>
            <p>环比<i class="el-icon-caret-bottom" />{{ totalCoinRing }}</p>
            <p>同比<i class="el-icon-caret-top" />{{ totalCoinWith }}</p>
          </div> -->
        </el-card>
        <el-card class="one">
          <h4>通话人数</h4>
          <p class="p">今日:{{ callNums }}</p>
          <!-- <div>
            <p>环比<i class="el-icon-caret-bottom" />{{ callRing }}</p>
            <p>同比<i class="el-icon-caret-top" />{{ callWith }}</p>
          </div> -->
        </el-card>
        <el-card class="one">
          <h4>通话率</h4>
          <p class="p">今日:{{ callRate }}</p>
          <!-- <div>
            <p>环比<i class="el-icon-caret-bottom" />{{ callRateRing }}</p>
            <p>同比<i class="el-icon-caret-top" />{{ callRateWith }}</p>
          </div> -->
        </el-card>
        <el-card class="one">
          <h4>首次接通人数</h4>
          <p class="p">今日:{{ firstCallNums }}</p>
          <!-- <div>
            <p>环比<i class="el-icon-caret-bottom" />{{ firstCallRing }}</p>
            <p>同比<i class="el-icon-caret-top" />{{ firstCallWith }}</p>
          </div> -->
        </el-card>
      </div>
      <!-- <div id="chartBox">
        <div id="myChartA" :style="{ width: '50%', height: '400px' }"></div>
        <div id="myChartB" :style="{ width: '50%', height: '400px' }"></div>
      </div> -->

      <div class="searchBox">
        <div class="p">
          <p :class="{ active: index == 1 }" @click="activeStatusA()">通话率</p>
          <p :class="{ active: index == 2 }" @click="activeStatusB()">
            通话金额
          </p>
          <p :class="{ active: index == 3 }" @click="activeStatusC()">
            通话人数
          </p>
        </div>

        <div>
          <span style="color: #9d9fa8; margin-right: 10px">请选择渠道</span>
          <el-select
            v-model="callStatisticsVal"
            placeholder="请选择通话统计渠道"
            clearable
          >
            <el-option
              v-for="item in callStatisticsOptions"
              :key="item.en_name"
              :label="item.cn_name"
              :value="item.en_name"
            >
            </el-option>
          </el-select>

          <el-date-picker
            v-model="callStatisticsTimeVal"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="callStatisticsPickerOptions"
            value-format="yyyy-MM-dd"
            @change="focusA"
          >
          </el-date-picker>
          <el-button class="btn" icon="el-icon-search" @click="callSearchBtn"
            >查询搜索</el-button
          >
          <el-button class="btn" icon="el-icon-download" @click="exportExcel"
            >导出Excel</el-button
          >
        </div>
      </div>
      <div id="myChart" :style="{ width: '100%', height: '500px' }"></div>
      <div class="searchBox">
        <div>
          <h3>通话统计详情</h3>
          <div style="margin-top: 10px">{{ time }}</div>
        </div>

        <div>
          <!-- <span style="color: #9d9fa8; margin-right: 10px">请选择渠道</span>
          <el-select v-model="callListVal" placeholder="请选择提现统计渠道">
            <el-option
              v-for="item in callListOptions"
              :key="item.en_name"
              :label="item.cn_name"
              :value="item.en_name"
            >
            </el-option>
          </el-select> -->
          <el-date-picker
            v-model="callListTimeVal"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="callListPickerOptions"
            value-format="yyyy-MM-dd"
            @change="focusB"
          >
          </el-date-picker>
          <el-button
            class="btn"
            icon="el-icon-search"
            @click="chartCallStatisticsBtn"
            >查询搜索</el-button
          >
          <el-button class="btn" icon="el-icon-download" @click="exportExcelB"
            >导出Excel</el-button
          >
        </div>
      </div>

      <div class="p">
        <p :class="{ active: indexA == 1 }" @click="activeStatusD()">男</p>
        <p :class="{ active: indexA == 2 }" @click="activeStatusE()">女</p>
      </div>

      <div id="myChartD" :style="{ width: '100%', height: '500px' }"></div>
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import {
  chartCallData,
  chartCallStatistics,
  channelList,
} from "@/api/DataManagement";

export default {
  components: { Pagination },
  inject: ["reload"],
  data() {
    return {
      index: 1,
      indexA: 1,
      totalCoinNums: "", //通话消费
      totalCoinRing: "",
      totalCoinWith: "",
      callNums: "", //通话人数
      callRing: "",
      callWith: "",
      callRate: "", //通话率
      callRateRing: "",
      callRateWith: "",
      firstCallNums: "", //首次接通人数
      firstCallRing: "",
      firstCallWith: "",
      //通话折线统计
      callStatisticsPickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      callStatisticsTimeValStartDate: "",
      callStatisticsTimeValEndDate: "",
      callStatisticsTimeVal: "", //通话折线图
      callStatisticsOptions: [],
      callStatisticsVal: "", //通话统计渠道

      //通话统计详情
      callListPickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      callListTimeValStartDate: "",
      callListTimeValEndDate: "",
      callListTimeVal: "", //通话折线图
      callListOptions: [],
      callListVal: "", //通话统计渠道
      time: "",
    };
  },
  methods: {
    // 导出通话统计
    exportExcel() {
      chartCallData({
        startTime: this.callStatisticsTimeValStartDate,
        endTime: this.callStatisticsTimeValEndDate,
        withdrawalType: this.index, //通话率/通话金额/通话人数
        channel: this.callStatisticsVal,
      }).then((res) => {
        if (res.code == 0) {
          require.ensure([], () => {
            var array = [];
            for (var i = 0; i <= res.data.date.length; i++) {
              var arr = {};
              arr = {
                date: res.data.date[i],
                ios: res.data.line.ios[i],
                android: res.data.line.android[i],
              };
              array.push(arr);
            }
            const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
            const tHeader = ["日期", "ios", "android"]; // 上面设置Excel的表格第一行的标题
            const filterVal = ["date", "ios", "android"]; // 上面的index、nickName、name是tableData里对象的属性key值
            const list = array; //把要导出的数据tableData存到list
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, "通话统计"); //最后一个是表名字
          });
        }
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    //导出通话统计详情
    exportExcelB() {
      chartCallStatistics({
        startTime: this.callListTimeValStartDate,
        endTime: this.callListTimeValEndDate,
        channel: this.callListVal,
        sex: this.indexA,
      }).then((res) => {
        if (res.code == 0) {
          require.ensure([], () => {
            const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
            // const tHeader = [
            //   "日期",
            //   "总消耗金币",
            //   "总时长(s)",
            //   "接通次数",
            //   "通话渗透率",
            // ]; // 上面设置Excel的表格第一行的标题
            // const filterVal = [
            //   "date",
            //   "coinNum",
            //   "timeNum",
            //   "registerNum",
            //   "rate",
            // ]; // 上面的index、nickName、name是tableData里对象的属性key值
            // const list = res.data.list; //把要导出的数据tableData存到list
            // const data = this.formatJson(filterVal, list);
            let tHeader = ["", ...res.data.label];
            let data = [
              ["通话人数", ...res.data.peopleNum],
              ["消耗金币", ...res.data.costCoinNum],
              ["通话时长", ...res.data.duration],
            ];

            export_json_to_excel(tHeader, data, res.data.time + "通话统计详情"); //最后一个是表名字
          });
        }
      });
      // chartCallStatistics({
      //   startTime: this.callListTimeValStartDate,
      //   endTime: this.callListTimeValEndDate,
      //   channel: this.callListVal,
      //   page: this.page,
      //   pageSize: this.pageSize,
      // }).then((res) => {
      //   if (res.code == 0) {
      //     require.ensure([], () => {
      //       const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
      //       const tHeader = [
      //         "日期",
      //         "总消耗金币",
      //         "总时长(s)",
      //         "接通次数",
      //         "通话渗透率",
      //       ]; // 上面设置Excel的表格第一行的标题
      //       const filterVal = [
      //         "date",
      //         "coinNum",
      //         "timeNum",
      //         "registerNum",
      //         "rate",
      //       ]; // 上面的index、nickName、name是tableData里对象的属性key值
      //       const list = res.data.list; //把要导出的数据tableData存到list
      //       const data = this.formatJson(filterVal, list);
      //       export_json_to_excel(tHeader, data, "通话统计详情"); //最后一个是表名字
      //     });
      //   }
      // });
    },
    // formatJson(filterVal, jsonData) {
    //   return jsonData.map((v) => filterVal.map((j) => v[j]));
    // },
    //通话详情列表
    chartCallStatistics() {
      chartCallStatistics({
        startTime: this.callListTimeValStartDate,
        endTime: this.callListTimeValEndDate,
        channel: this.callListVal,
        sex: this.indexA,
      }).then((res) => {
        if (res.code == 0) {
          this.time = res.data.time;
          // 基于准备好的dom，初始化echarts实例
          let myChartD = this.$echarts.init(
            document.getElementById("myChartD")
          );
          var colors = ["#5470C6", "#91CC75", "#EE6666"];
          // 绘制图表
          myChartD.setOption({
            color: colors,
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
              },
            },
            legend: {
              data: ["通话人数", `消耗金币`, "通话时长"],
            },
            grid: {
              left: "3%",
              right: "10%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              axisTick: {
                alignWithLabel: true,
              },
              data: res.data.label,
            },
            yAxis: [
              {
                type: "value",
                name: "通话人数",
                min: 0,
                position: "right",
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[0],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
              {
                type: "value",
                name: `消耗金币`,
                min: 0,
                position: "right",
                offset: 80,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[1],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
              {
                type: "value",
                name: "通话时长",
                min: 0,
                position: "right",
                offset: 160,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[2],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
            ],
            series: [
              {
                name: "通话人数",
                type: "bar",
                data: res.data.peopleNum,
              },
              {
                name: `消耗金币`,
                type: "bar",
                yAxisIndex: 1,
                data: res.data.costCoinNum,
              },
              {
                name: "通话时长",
                type: "bar",
                yAxisIndex: 2,
                data: res.data.duration,
              },
            ],
          });
        }
      });
    },

    //选项卡男
    activeStatusD() {
      this.indexA = 1;
      chartCallStatistics({
        startTime: this.callListTimeValStartDate,
        endTime: this.callListTimeValEndDate,
        channel: this.callListVal,
        sex: this.indexA,
      }).then((res) => {
        if (res.code == 0) {
          this.time = res.data.time;
          // 基于准备好的dom，初始化echarts实例
          let myChartD = this.$echarts.init(
            document.getElementById("myChartD")
          );
          var colors = ["#5470C6", "#91CC75", "#EE6666"];
          // 绘制图表
          myChartD.setOption({
            color: colors,
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
              },
            },
            legend: {
              data: ["通话人数", `消耗金币`, "通话时长"],
            },
            grid: {
              left: "3%",
              right: "10%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              axisTick: {
                alignWithLabel: true,
              },
              data: res.data.label,
            },
            yAxis: [
              {
                type: "value",
                name: "通话人数",
                min: 0,
                position: "right",
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[0],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
              {
                type: "value",
                name: `消耗金币`,
                min: 0,
                position: "right",
                offset: 80,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[1],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
              {
                type: "value",
                name: "通话时长",
                min: 0,
                position: "right",
                offset: 160,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[2],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
            ],
            series: [
              {
                name: "通话人数",
                type: "bar",
                data: res.data.peopleNum,
              },
              {
                name: `消耗金币`,
                type: "bar",
                yAxisIndex: 1,
                data: res.data.costCoinNum,
              },
              {
                name: "通话时长",
                type: "bar",
                yAxisIndex: 2,
                data: res.data.duration,
              },
            ],
          });
        }
      });
    },
    //选项卡女
    activeStatusE() {
      this.indexA = 2;
      chartCallStatistics({
        startTime: this.callListTimeValStartDate,
        endTime: this.callListTimeValEndDate,
        channel: this.callListVal,
        sex: this.indexA,
      }).then((res) => {
        if (res.code == 0) {
          this.time = res.data.time;
          // 基于准备好的dom，初始化echarts实例
          let myChartD = this.$echarts.init(
            document.getElementById("myChartD")
          );
          var colors = ["#5470C6", "#91CC75", "#EE6666"];
          // 绘制图表
          myChartD.setOption({
            color: colors,
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
              },
            },
            legend: {
              data: ["通话人数", `获取宝石`, "通话时长"],
            },
            grid: {
              left: "3%",
              right: "10%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              axisTick: {
                alignWithLabel: true,
              },
              data: res.data.label,
            },
            yAxis: [
              {
                type: "value",
                name: "通话人数",
                min: 0,
                position: "right",
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[0],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
              {
                type: "value",
                name: `获取宝石`,
                min: 0,
                position: "right",
                offset: 80,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[1],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
              {
                type: "value",
                name: "通话时长",
                min: 0,
                position: "right",
                offset: 160,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[2],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
            ],
            series: [
              {
                name: "通话人数",
                type: "bar",
                data: res.data.peopleNum,
              },
              {
                name: `获取宝石`,
                type: "bar",
                yAxisIndex: 1,
                data: res.data.costCoinNum,
              },
              {
                name: "通话时长",
                type: "bar",
                yAxisIndex: 2,
                data: res.data.duration,
              },
            ],
          });
        }
      });
    },
    //搜索
    chartCallStatisticsBtn() {
      let txt = this.indexA == 1 ? "消耗金币" : "消耗宝石";
      chartCallStatistics({
        startTime: this.callListTimeValStartDate,
        endTime: this.callListTimeValEndDate,
        channel: this.callListVal,
        sex: this.indexA,
      }).then((res) => {
        if (res.code == 0) {
          this.time = res.data.time;
          // 基于准备好的dom，初始化echarts实例
          let myChartD = this.$echarts.init(
            document.getElementById("myChartD")
          );
          var colors = ["#5470C6", "#91CC75", "#EE6666"];
          // 绘制图表
          myChartD.setOption({
            color: colors,
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
              },
            },
            legend: {
              data: ["通话人数", txt, "通话时长"],
            },
            grid: {
              left: "3%",
              right: "10%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              axisTick: {
                alignWithLabel: true,
              },
              data: res.data.label,
            },
            yAxis: [
              {
                type: "value",
                name: "通话人数",
                min: 0,
                position: "right",
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[0],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
              {
                type: "value",
                name: txt,
                min: 0,
                position: "right",
                offset: 80,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[1],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
              {
                type: "value",
                name: "通话时长",
                min: 0,
                position: "right",
                offset: 160,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[2],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
            ],
            series: [
              {
                name: "通话人数",
                type: "bar",
                data: res.data.peopleNum,
              },
              {
                name: txt,
                type: "bar",
                yAxisIndex: 1,
                data: res.data.costCoinNum,
              },
              {
                name: "通话时长",
                type: "bar",
                yAxisIndex: 2,
                data: res.data.duration,
              },
            ],
          });
        }
      });
    },
    //折线图
    chartCallData() {
      chartCallData({
        startTime: "",
        endTime: "",
        withdrawalType: "1", //通话率/通话金额/通话人数
      }).then((res) => {
        if (res.code == 0) {
          this.totalCoinNums = res.data.totalCoinNums; //通话消费
          this.totalCoinRing = res.data.totalCoinRing;
          this.totalCoinWith = res.data.totalCoinWith;
          this.callNums = res.data.callNums; //通话人数
          this.callRing = res.data.callRing;
          this.callWith = res.data.callWith;
          this.callRate = res.data.callRate; //通话率
          this.callRateRing = res.data.callRateRing;
          this.callRateWith = res.data.callRateWith;
          this.firstCallNums = res.data.firstCallNums; //首次接通人数
          this.firstCallRing = res.data.firstCallRing;
          this.firstCallWith = res.data.firstCallWith;
          // // 基于准备好的dom，初始化echarts实例
          // let myChartA = this.$echarts.init(
          //   document.getElementById("myChartA")
          // );
          // // 绘制图表
          // myChartA.setOption({
          //   title: {
          //     text: "性别统计(总计)",
          //   },
          //   tooltip: {
          //     trigger: "axis",
          //     axisPointer: {
          //       type: "shadow",
          //     },
          //   },
          //   legend: {
          //     data: ["call", "talk"],
          //   },
          //   grid: {
          //     left: "3%",
          //     right: "4%",
          //     bottom: "3%",
          //     containLabel: true,
          //   },
          //   xAxis: {
          //     type: "value",
          //     boundaryGap: [0, 0.01],
          //   },
          //   yAxis: {
          //     type: "category",
          //     data: ["男", "女"],
          //   },
          //   series: [
          //     {
          //       name: "call",
          //       type: "bar",
          //       data: res.data.call,
          //     },
          //     {
          //       name: "talk",
          //       type: "bar",
          //       data: res.data.take,
          //     },
          //   ],
          // });

          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById("myChart"));
          // 绘制图表
          myChart.setOption({
            color: ["#5470C6", "#91CC75", "#EE6666"],
            title: {
              text: "",
            },
            tooltip: {
              trigger: "axis",
            },
            legend: {
              data: ["IOS", "安卓"],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: res.data.date,
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                name: "IOS",
                type: "line",
                data: res.data.line.ios,
              },
              {
                name: "安卓",
                type: "line",
                data: res.data.line.android,
              },
            ],
          });

          // // 基于准备好的dom，初始化echarts实例
          // let myChartB = this.$echarts.init(
          //   document.getElementById("myChartB")
          // );
          // // 绘制图表
          // myChartB.setOption({
          //   title: {
          //     text: "性别统计(今日)",
          //     left: "center",
          //   },
          //   tooltip: {
          //     trigger: "item",
          //   },
          //   legend: {
          //     orient: "vertical",
          //     left: "left",
          //   },
          //   series: [
          //     {
          //       name: "访问来源",
          //       type: "pie",
          //       radius: "50%",
          //       data: res.data.pie,
          //       emphasis: {
          //         itemStyle: {
          //           shadowBlur: 10,
          //           shadowOffsetX: 0,
          //           shadowColor: "rgba(0, 0, 0, 0.5)",
          //         },
          //       },
          //     },
          //   ],
          // });
        }
      });
    },
    //通话搜索
    callSearchBtn() {
      chartCallData({
        startTime: this.callStatisticsTimeValStartDate,
        endTime: this.callStatisticsTimeValEndDate,
        withdrawalType: this.index, //通话率/通话金额/通话人数
        channel: this.callStatisticsVal,
      }).then((res) => {
        if (res.code == 0) {
          this.totalCoinNums = res.data.totalCoinNums; //通话消费
          this.totalCoinRing = res.data.totalCoinRing;
          this.totalCoinWith = res.data.totalCoinWith;
          this.callNums = res.data.callNums; //通话人数
          this.callRing = res.data.callRing;
          this.callWith = res.data.callWith;
          this.callRate = res.data.callRate; //通话率
          this.callRateRing = res.data.callRateRing;
          this.callRateWith = res.data.callRateWith;
          this.firstCallNums = res.data.firstCallNums; //首次接通人数
          this.firstCallRing = res.data.firstCallRing;
          this.firstCallWith = res.data.firstCallWith;
          // // 基于准备好的dom，初始化echarts实例
          // let myChartA = this.$echarts.init(
          //   document.getElementById("myChartA")
          // );
          // // 绘制图表
          // myChartA.setOption({
          //   title: {
          //     text: "性别统计(总计)",
          //   },
          //   tooltip: {
          //     trigger: "axis",
          //     axisPointer: {
          //       type: "shadow",
          //     },
          //   },
          //   legend: {
          //     data: ["call", "talk"],
          //   },
          //   grid: {
          //     left: "3%",
          //     right: "4%",
          //     bottom: "3%",
          //     containLabel: true,
          //   },
          //   xAxis: {
          //     type: "value",
          //     boundaryGap: [0, 0.01],
          //   },
          //   yAxis: {
          //     type: "category",
          //     data: ["男", "女"],
          //   },
          //   series: [
          //     {
          //       name: "call",
          //       type: "bar",
          //       data: res.data.call,
          //     },
          //     {
          //       name: "talk",
          //       type: "bar",
          //       data: res.data.take,
          //     },
          //   ],
          // });

          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById("myChart"));
          // 绘制图表
          myChart.setOption({
            color: ["#5470C6", "#91CC75", "#EE6666"],
            title: {
              text: "",
            },
            tooltip: {
              trigger: "axis",
            },
            legend: {
              data: ["IOS", "安卓"],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: res.data.date,
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                name: "IOS",
                type: "line",
                data: res.data.line.ios,
              },
              {
                name: "安卓",
                type: "line",
                data: res.data.line.android,
              },
            ],
          });

          // // 基于准备好的dom，初始化echarts实例
          // let myChartB = this.$echarts.init(
          //   document.getElementById("myChartB")
          // );
          // // 绘制图表
          // myChartB.setOption({
          //   title: {
          //     text: "性别统计(今日)",
          //     left: "center",
          //   },
          //   tooltip: {
          //     trigger: "item",
          //   },
          //   legend: {
          //     orient: "vertical",
          //     left: "left",
          //   },
          //   series: [
          //     {
          //       name: "访问来源",
          //       type: "pie",
          //       radius: "50%",
          //       data: res.data.pie,
          //       emphasis: {
          //         itemStyle: {
          //           shadowBlur: 10,
          //           shadowOffsetX: 0,
          //           shadowColor: "rgba(0, 0, 0, 0.5)",
          //         },
          //       },
          //     },
          //   ],
          // });
        }
      });
    },
    activeStatusA() {
      this.index = 1;
      chartCallData({
        startTime: this.callStatisticsTimeValStartDate,
        endTime: this.callStatisticsTimeValEndDate,
        withdrawalType: this.index, //通话率/通话金额/通话人数
        channel: this.callStatisticsVal,
      }).then((res) => {
        if (res.code == 0) {
          this.totalCoinNums = res.data.totalCoinNums; //通话消费
          this.totalCoinRing = res.data.totalCoinRing;
          this.totalCoinWith = res.data.totalCoinWith;
          this.callNums = res.data.callNums; //通话人数
          this.callRing = res.data.callRing;
          this.callWith = res.data.callWith;
          this.callRate = res.data.callRate; //通话率
          this.callRateRing = res.data.callRateRing;
          this.callRateWith = res.data.callRateWith;
          this.firstCallNums = res.data.firstCallNums; //首次接通人数
          this.firstCallRing = res.data.firstCallRing;
          this.firstCallWith = res.data.firstCallWith;
          // // 基于准备好的dom，初始化echarts实例
          // let myChartA = this.$echarts.init(
          //   document.getElementById("myChartA")
          // );
          // // 绘制图表
          // myChartA.setOption({
          //   title: {
          //     text: "性别统计(总计)",
          //   },
          //   tooltip: {
          //     trigger: "axis",
          //     axisPointer: {
          //       type: "shadow",
          //     },
          //   },
          //   legend: {
          //     data: ["call", "talk"],
          //   },
          //   grid: {
          //     left: "3%",
          //     right: "4%",
          //     bottom: "3%",
          //     containLabel: true,
          //   },
          //   xAxis: {
          //     type: "value",
          //     boundaryGap: [0, 0.01],
          //   },
          //   yAxis: {
          //     type: "category",
          //     data: ["男", "女"],
          //   },
          //   series: [
          //     {
          //       name: "call",
          //       type: "bar",
          //       data: res.data.call,
          //     },
          //     {
          //       name: "talk",
          //       type: "bar",
          //       data: res.data.take,
          //     },
          //   ],
          // });

          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById("myChart"));
          // 绘制图表
          myChart.setOption({
            color: ["#5470C6", "#91CC75", "#EE6666"],
            title: {
              text: "",
            },
            tooltip: {
              trigger: "axis",
            },
            legend: {
              data: ["IOS", "安卓"],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: res.data.date,
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                name: "IOS",
                type: "line",
                data: res.data.line.ios,
              },
              {
                name: "安卓",
                type: "line",
                data: res.data.line.android,
              },
            ],
          });

          // // 基于准备好的dom，初始化echarts实例
          // let myChartB = this.$echarts.init(
          //   document.getElementById("myChartB")
          // );
          // // 绘制图表
          // myChartB.setOption({
          //   title: {
          //     text: "性别统计(今日)",
          //     left: "center",
          //   },
          //   tooltip: {
          //     trigger: "item",
          //   },
          //   legend: {
          //     orient: "vertical",
          //     left: "left",
          //   },
          //   series: [
          //     {
          //       name: "访问来源",
          //       type: "pie",
          //       radius: "50%",
          //       data: res.data.pie,
          //       emphasis: {
          //         itemStyle: {
          //           shadowBlur: 10,
          //           shadowOffsetX: 0,
          //           shadowColor: "rgba(0, 0, 0, 0.5)",
          //         },
          //       },
          //     },
          //   ],
          // });
        }
      });
    },
    activeStatusB() {
      this.index = 2;
      chartCallData({
        startTime: this.callStatisticsTimeValStartDate,
        endTime: this.callStatisticsTimeValEndDate,
        withdrawalType: this.index, //通话率/通话金额/通话人数
        channel: this.callStatisticsVal,
      }).then((res) => {
        if (res.code == 0) {
          this.totalCoinNums = res.data.totalCoinNums; //通话消费
          this.totalCoinRing = res.data.totalCoinRing;
          this.totalCoinWith = res.data.totalCoinWith;
          this.callNums = res.data.callNums; //通话人数
          this.callRing = res.data.callRing;
          this.callWith = res.data.callWith;
          this.callRate = res.data.callRate; //通话率
          this.callRateRing = res.data.callRateRing;
          this.callRateWith = res.data.callRateWith;
          this.firstCallNums = res.data.firstCallNums; //首次接通人数
          this.firstCallRing = res.data.firstCallRing;
          this.firstCallWith = res.data.firstCallWith;
          // // 基于准备好的dom，初始化echarts实例
          // let myChartA = this.$echarts.init(
          //   document.getElementById("myChartA")
          // );
          // // 绘制图表
          // myChartA.setOption({
          //   title: {
          //     text: "性别统计(总计)",
          //   },
          //   tooltip: {
          //     trigger: "axis",
          //     axisPointer: {
          //       type: "shadow",
          //     },
          //   },
          //   legend: {
          //     data: ["call", "talk"],
          //   },
          //   grid: {
          //     left: "3%",
          //     right: "4%",
          //     bottom: "3%",
          //     containLabel: true,
          //   },
          //   xAxis: {
          //     type: "value",
          //     boundaryGap: [0, 0.01],
          //   },
          //   yAxis: {
          //     type: "category",
          //     data: ["男", "女"],
          //   },
          //   series: [
          //     {
          //       name: "call",
          //       type: "bar",
          //       data: res.data.call,
          //     },
          //     {
          //       name: "talk",
          //       type: "bar",
          //       data: res.data.take,
          //     },
          //   ],
          // });

          //基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById("myChart"));
          // 绘制图表
          myChart.setOption({
            color: ["#5470C6", "#91CC75", "#EE6666"],
            title: {
              text: "",
            },
            tooltip: {
              trigger: "axis",
            },
            legend: {
              data: ["IOS", "安卓"],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: res.data.date,
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                name: "IOS",
                type: "line",
                data: res.data.line.ios,
              },
              {
                name: "安卓",
                type: "line",
                data: res.data.line.android,
              },
            ],
          });

          // // 基于准备好的dom，初始化echarts实例
          // let myChartB = this.$echarts.init(
          //   document.getElementById("myChartB")
          // );
          // // 绘制图表
          // myChartB.setOption({
          //   title: {
          //     text: "性别统计(今日)",
          //     left: "center",
          //   },
          //   tooltip: {
          //     trigger: "item",
          //   },
          //   legend: {
          //     orient: "vertical",
          //     left: "left",
          //   },
          //   series: [
          //     {
          //       name: "访问来源",
          //       type: "pie",
          //       radius: "50%",
          //       data: res.data.pie,
          //       emphasis: {
          //         itemStyle: {
          //           shadowBlur: 10,
          //           shadowOffsetX: 0,
          //           shadowColor: "rgba(0, 0, 0, 0.5)",
          //         },
          //       },
          //     },
          //   ],
          // });
        }
      });
    },
    activeStatusC() {
      this.index = 3;
      chartCallData({
        startTime: this.callStatisticsTimeValStartDate,
        endTime: this.callStatisticsTimeValEndDate,
        withdrawalType: this.index, //通话率/通话金额/通话人数
        channel: this.callStatisticsVal,
      }).then((res) => {
        if (res.code == 0) {
          this.totalCoinNums = res.data.totalCoinNums; //通话消费
          this.totalCoinRing = res.data.totalCoinRing;
          this.totalCoinWith = res.data.totalCoinWith;
          this.callNums = res.data.callNums; //通话人数
          this.callRing = res.data.callRing;
          this.callWith = res.data.callWith;
          this.callRate = res.data.callRate; //通话率
          this.callRateRing = res.data.callRateRing;
          this.callRateWith = res.data.callRateWith;
          this.firstCallNums = res.data.firstCallNums; //首次接通人数
          this.firstCallRing = res.data.firstCallRing;
          this.firstCallWith = res.data.firstCallWith;
          // // 基于准备好的dom，初始化echarts实例
          // let myChartA = this.$echarts.init(
          //   document.getElementById("myChartA")
          // );
          // // 绘制图表
          // myChartA.setOption({
          //   title: {
          //     text: "性别统计(总计)",
          //   },
          //   tooltip: {
          //     trigger: "axis",
          //     axisPointer: {
          //       type: "shadow",
          //     },
          //   },
          //   legend: {
          //     data: ["call", "talk"],
          //   },
          //   grid: {
          //     left: "3%",
          //     right: "4%",
          //     bottom: "3%",
          //     containLabel: true,
          //   },
          //   xAxis: {
          //     type: "value",
          //     boundaryGap: [0, 0.01],
          //   },
          //   yAxis: {
          //     type: "category",
          //     data: ["男", "女"],
          //   },
          //   series: [
          //     {
          //       name: "call",
          //       type: "bar",
          //       data: res.data.call,
          //     },
          //     {
          //       name: "talk",
          //       type: "bar",
          //       data: res.data.take,
          //     },
          //   ],
          // });
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById("myChart"));
          // 绘制图表
          myChart.setOption({
            color: ["#5470C6", "#91CC75", "#EE6666"],
            title: {
              text: "",
            },
            tooltip: {
              trigger: "axis",
            },
            legend: {
              data: ["IOS", "安卓"],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: res.data.date,
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                name: "IOS",
                type: "line",
                data: res.data.line.ios,
              },
              {
                name: "安卓",
                type: "line",
                data: res.data.line.android,
              },
            ],
          });
        }
      });
    },
    focusA(time) {
      if (!this.callStatisticsTimeVal) {
        this.callStatisticsTimeVal = [];
      }
      this.callStatisticsTimeValStartDate = this.callStatisticsTimeVal[0];
      this.callStatisticsTimeValEndDate = this.callStatisticsTimeVal[1];
    },
    focusB(time) {
      if (!this.callListTimeVal) {
        this.callListTimeVal = [];
      }
      this.callListTimeValStartDate = this.callListTimeVal[0];
      this.callListTimeValEndDate = this.callListTimeVal[1];
    },
    //渠道列表
    channelList() {
      channelList({}).then((res) => {
        if (res.code == 0) {
          this.callStatisticsOptions = res.data;
          this.callListOptions = res.data;
        }
      });
    },
  },
  created() {
    this.chartCallData();
    this.chartCallStatistics();
    this.channelList();
  },
};
</script>

<style lang="less" scoped>
.userAnalysis {
  margin: 30px;
  height: 100%;
  .userStatisticsBox {
    margin-bottom: 30px;
    h3 {
      font-size: 30px;
      margin: 0px;
    }
    .todaySpan {
      margin-top: 10px;
      display: inline-block;
    }
    .userStatisticsItem {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 40px;
      .one {
        width: 300px;
        height: 150px;
        h4 {
          margin: 0px;
          font-size: 26px;
          margin-bottom: 10px;
        }
        .p {
          margin: 20px 0px;
          font-size: 24px;
        }
        p {
          margin: 0px;
        }
        div {
          display: flex;
          justify-content: space-between;
        }
      }
    }
    .searchBox {
      display: flex;
      justify-content: space-between;
      .el-input__inner,
      .el-range-editor.el-input__inner,
      .el-date-editor .el-range-input {
        margin-left: 10px;
      }
      .p2 {
        display: flex;
        p {
          width: 70px;
          height: 40px;
          line-height: 40px;
          text-align: center;
        }
      }
      .p {
        display: flex;
        p {
          width: 100px;
          height: 40px;
          line-height: 40px;
          text-align: center;
        }
      }
      .active {
        background-color: #0079fe;
        color: #fff;
        border-radius: 10px;
      }
      .el-button {
        margin-left: 20px;
      }
    }
    #myChart {
      margin-bottom: 30px;
    }
    .el-button {
      margin-left: 20px;
    }
    .el-table {
      margin-top: 30px;
    }
    .p {
      display: flex;
      p {
        width: 100px;
        height: 40px;
        line-height: 40px;
        text-align: center;
      }
    }
    .active {
      background-color: #0079fe;
      color: #fff;
      border-radius: 10px;
    }
  }
}
</style>